React Bootstrap is one version of Bootstrap made for React.
It’s a set of React components that have Bootstrap styles.
In this article, we’ll look at how to customize React Bootstrap cards.
Image Overlays
We can add card backgrounds and overlays,
To do that, we can use the Card.ImgOverlay component.
For example, we can write:
import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Card style={{ width: "20rem" }}>
<Card.Img
variant="top"
src="https://dummyimage.com/700/ffffff/000000"
/>
<Card.ImgOverlay>
<Card.Title>Special title</Card.Title>
<Card.Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
eget lectus a ante convallis gravida. Donec fringilla odio ut magna
gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
nibh, vitae eleifend quam. Duis a enim lacus.
</Card.Text>
<Button variant="primary">Go</Button>
</Card.ImgOverlay>
</Card>
</>
);
}
to make our text display above an image.
We did that with the Card.ImgOverlay component.
Navigation
We can add navigation to the card’s header.
To do that we can write:
import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Nav from "react-bootstrap/Nav";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Card>
<Card.Header>
<Nav variant="tabs" defaultActiveKey="#first">
<Nav.Item>
<Nav.Link href="#first">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="#link">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="#disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body>
<Card.Title>Special title</Card.Title>
<Card.Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
eget lectus a ante convallis gravida. Donec fringilla odio ut magna
gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
nibh, vitae eleifend quam. Duis a enim lacus.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</>
);
}
We have a navbar on the top of the card since we add the Nav component to the Card.Header component.
defaultActiveKey has the key of the active tab.
This can be changed to the pills variant to display the nav links as buttons.
For instance, we can write:
import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Nav from "react-bootstrap/Nav";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
<Card>
<Card.Header>
<Nav variant="pills" defaultActiveKey="#first">
<Nav.Item>
<Nav.Link href="#first">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="#link">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="#disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
</Card.Header>
<Card.Body>
<Card.Title>Special title</Card.Title>
<Card.Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
eget lectus a ante convallis gravida. Donec fringilla odio ut magna
gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
nibh, vitae eleifend quam. Duis a enim lacus.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</>
);
}
We change the variant prop on the Nav to pills so that we get button style links.
Background Color
We can set the background color with the bg prop.
The text color can be changed with the text prop.
For instance, we can write:
import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Nav from "react-bootstrap/Nav";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
return (
<>
{[
"Primary",
"Secondary",
"Success",
"Danger",
"Warning",
"Info",
"Light",
"Dark"
].map((variant, index) => (
<Card
bg={variant.toLowerCase()}
key={index}
text={variant.toLowerCase() === "light" ? "dark" : "white"}
style={{ width: "18rem" }}
className="mb-2"
>
<Card.Header>Header</Card.Header>
<Card.Body>
<Card.Title>{variant} Card Title </Card.Title>
<Card.Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Card.Text>
</Card.Body>
</Card>
))}
</>
);
}
We have the text prop to change the style variant of the text.
The bg prop changes the style variant of the card background.
Conclusion
We can add images that display below text content and nav links to our cards.
Also, we can change the text and background color of cards.
